<section class="content-header">
    <h1>
        {{title}}
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <div class="row">

        <div class="col-md-12">
            <div class="box box-default">
                <div class="box-header with-border">
                    <div class="box-title">
                        <input type="button" class="btn btn-success" (click)="addUserDialogVisible = true" value="添加用户">
                        <input type="button" class="btn btn-danger" (click)="delUser()" value="删除用户">
                    </div>
                    <div class="box-tools pull-right">
                        <button type="button" (click)="updateUsers()" class="btn btn-info btn-sm" data-toggle="tooltip"
                            title="保存更改">
                            <i class="fa fa-save"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="collapse">
                            <i class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body">
                    <dx-data-grid [dataSource]="userList" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true"
                        [rowAlternationEnabled]="true" (onSelectionChanged)="selectionChanged($event)">
                        <dxo-paging [pageSize]="10"></dxo-paging>
                        <dxo-selection mode="multiple"></dxo-selection>
                        <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                        </dxo-pager>
                        <dxi-column [allowEditing]="false" dataField="id" caption="ID">
                        </dxi-column>
                        <dxi-column dataField="name" caption="用户名">
                        </dxi-column>
                        <dxi-column dataField="no" caption="工号">
                        </dxi-column>
                        <dxi-column dataField="email" caption="邮箱">
                        </dxi-column>
                        <!-- <dxi-column dataField="phone" caption="号码">
                        </dxi-column> -->
                        <!-- <dxi-column dataField="password" caption="密码">
                        </dxi-column> -->
                        <dxi-column [allowEditing]="false" dataField="createDate" caption="创建日期">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="updateDate" caption="更新日期">
                        </dxi-column>
                        <dxi-column [allowEditing]="false" dataField="loginDate" caption="登陆日期">
                        </dxi-column>
                        <dxo-editing mode="form" [allowUpdating]="true">
                        </dxo-editing>
                        <dxi-column [allowEditing]="false" dataField="权限" [allowFiltering]="false" [allowSorting]="false"
                            cellTemplate="cellTemplate"></dxi-column>
                        <div *dxTemplate="let data of 'cellTemplate'">
                            <input type="button" class="btn btn-danger" (click)="showDetail(data)" value="权限">
                        </div>
                        <dxi-column [allowEditing]="false" dataField="监控区域" [allowFiltering]="false" [allowSorting]="false"
                            cellTemplate="cellTemplate1">
                        </dxi-column>
                        <div *dxTemplate="let data1 of 'cellTemplate1'">
                            <input type="button" class="btn btn-danger" (click)="getReportSubAreaData(data1)" value="监控区域">
                        </div>
                    </dx-data-grid>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看编辑当前用户的角色信息 -->
    <dx-popup [width]="660" [height]="540" [showTitle]="true" [title]="dialogTitle" [dragEnabled]="false"
        [closeOnOutsideClick]="true" contentTemplate="popoverContent" [(visible)]="popupVisible">

        <div *dxTemplate="let data of 'popoverContent'" class="form">
            <h4 *ngIf="curUserDetail">当前用户：{{curUserDetail.loginName}}</h4>
            <div class="modal-body">
                <ul>
                    <li *ngFor="let role of roleList">
                        <input type="checkbox" [checked]="roleIsChecked(role)" (click)="bindRoleToUser(role)">
                        {{role.name}}
                    </li>
                </ul>
            </div>
        </div>
    </dx-popup>

    <!-- 新增用户信息 -->
    <dx-popup [width]="660" [height]="540" [showTitle]="true" [title]="dialogTitle" [dragEnabled]="false"
        [closeOnOutsideClick]="true" contentTemplate="popoverContent" [(visible)]="addUserDialogVisible">
        <div *dxTemplate="let data of 'popoverContent'" class="form">
            <div class="modal-body">
                <h4>新增用户</h4>
                <form>
                    <div class="form-group">
                        <label for="exampleInputEmail1">用户ID(不能重复)</label>
                        <input type="email" class="form-control" name="userModel.uid" [(ngModel)]="userModel.uid" id="exampleInputEmail1"
                            placeholder="用户ID">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">用户名称</label>
                        <input type="email" class="form-control" name="userModel.uname" [(ngModel)]="userModel.uname"
                            id="exampleInputEmail1" placeholder="用户名称">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword2">邮箱地址</label>
                        <input type="email" class="form-control" name="userModel.mail" [(ngModel)]="userModel.mail" id="exampleInputPassword2"
                            placeholder="邮箱地址">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword2">登陆密码</label>
                        <input type="email" class="form-control" name="userModel.password" [(ngModel)]="userModel.password"
                            id="exampleInputPassword2" placeholder="登陆密码">
                    </div>
                    <button type="submit" class="btn btn-default pull-right" (click)="registerUser()">保存</button>
                </form>
                <button class="btn btn-default pull-left" (click)="canceLAddMenu()">取消</button>

            </div>
        </div>

    </dx-popup>
    <!-- 新增区域信息 -->
    <dx-popup [width]="660" [height]="540" [showTitle]="true" [title]="dialogAreaTitle" [dragEnabled]="false"
        [closeOnOutsideClick]="true" contentTemplate="popoverContent" [(visible)]="addUserAreaDialogVisible">
        <div *dxTemplate="let data of 'popoverContent'" class="form">
            <div class="modal-body">
                <h4>首页显示区域选择</h4>
                <form>
                    <div class="form-group">
                        <!-- <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems" displayExpr="subArea"
                    [(selectedItem)]="subAareSelected" [value]="subAareSelected"
                    [searchEnabled]="true">
                </dx-select-box> -->
                        <dx-drop-down-box #dddb style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px"
                            [(value)]="subAareSelected" displayExpr="subArea" placeholder="请选择区域" [showClearButton]="true"
                            [dataSource]="subAreaItems">
                            <dxo-drop-down-options></dxo-drop-down-options>
                            <div *dxTemplate="let data of 'content'">
                                <button type="button" (click)="clearEquipmentSelected()" class="btn btn-default btn-sm"
                                    title="重置">重置</button>&nbsp;&nbsp;&nbsp;
                                <button type="button" (click)="equipmentSelectedOk()" class="btn btn-info btn-sm" title="确定">确定</button>
                                <dx-data-grid [dataSource]="subAreaItems" [hoverStateEnabled]="true" [paging]="{ enabled: true, pageSize: 1000 }"
                                    [filterRow]="{ visible: true }" [(selectedRowKeys)]="subAareSelected" [scrolling]="{ mode: 'infinite' }"
                                    [height]="265" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true"
                                    [rowAlternationEnabled]="true">
                                    <dxo-selection [selectAllMode]="allPages" [showCheckBoxesMode]="always" mode="multiple"></dxo-selection>
                                    <dxi-column dataField="subArea" caption="区域选择">
                                    </dxi-column>
                                </dx-data-grid>
                            </div>
                        </dx-drop-down-box>



                    </div>

                    <button type="submit" class="btn btn-default pull-right" (click)="updateSubArea()">保存</button>
                </form>
                <button class="btn btn-default pull-left" (click)="canceLAddMenu()">取消</button>

            </div>
        </div>

    </dx-popup>



</section>